import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:zootix/screens/goods/zt_goods_controller.dart';
import 'package:zootix/screens/goods/zt_goods_item.dart';
import 'package:zootix/store/zt_auth.store.dart';
import 'package:zootix/util/zt_screen_adaper_util.dart';
import 'package:zootix/widgets/zt_customer_servicer.dart';

class ZtGoodsListPage extends StatelessWidget {
  final _controller = Get.put<ZtGoodsController>(ZtGoodsController());
  ZtGoodsListPage({super.key});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onHorizontalDragEnd: (DragEndDetails details) {
          if (details.primaryVelocity! > 0) {
            Get.back();
          }
        },
        child: Scaffold(
          body: Column(children: [
            SizedBox(
              height: ZtScreenAdaper.height(260),
              child: Stack(
                alignment: Alignment.topCenter,
                children: [
                  Container(
                    decoration: const BoxDecoration(
                      image: DecorationImage(
                        alignment: Alignment.topCenter,
                        image: AssetImage('assets/images/coin_store_bg.png'),
                        fit: BoxFit.contain,
                      ),
                    ),
                  ),
                  Container(
                    decoration: const BoxDecoration(
                      image: DecorationImage(
                        alignment: Alignment.topCenter,
                        image:
                            AssetImage('assets/images/coin_store_coins_bg.png'),
                        fit: BoxFit.contain,
                      ),
                    ),
                  ),

                  Positioned(
                      left: 0,
                      right: 0,
                      top: ZtScreenAdaper.width(10),
                      child: SafeArea(
                          child: Text(
                        'Coin Store',
                        style: TextStyle(
                            fontSize: ZtScreenAdaper.sp(20),
                            color: Colors.white),
                        textAlign: TextAlign.center,
                      ))),
                  Positioned(
                      left: ZtScreenAdaper.width(10),
                      top: ZtScreenAdaper.width(10),
                      child: SafeArea(
                          child: InkWell(
                        onTap: () {
                          Get.back();
                        },
                        child: const Icon(Icons.arrow_back_ios,
                            color: Colors.white),
                      ))),
                  Positioned(
                    right: ZtScreenAdaper.width(10),
                    top: ZtScreenAdaper.width(10),
                    child: const SafeArea(child: ZtCustomerServicerWdiget()),
                  ),
                  Positioned(
                      left: 0,
                      right: ZtScreenAdaper.width(120),
                      bottom: ZtScreenAdaper.width(55),
                      child: Obx(() => Text(
                            '${ZtAuthStore.to.userInfo.value.availableCoins ?? 0}',
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                fontStyle: FontStyle.italic,
                                fontWeight: FontWeight.bold,
                                color: Colors.white,
                                fontSize: ZtScreenAdaper.sp(40)),
                          ))),
                  Positioned(
                      left: 0,
                      right: ZtScreenAdaper.width(120),
                      bottom: ZtScreenAdaper.width(40),
                      child: Text(
                        'My coins',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Colors.white,
                            fontSize: ZtScreenAdaper.sp(20)),
                      )),
                  // YourContentWidget(),
                ],
              ),
            ),
            Expanded(child: _buildGoodsList())
          ]),
        ));
  }

  Widget _buildGoodsList() {
    return Obx(() => SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: ZtScreenAdaper.width(20)),
            child: Column(
                children: _controller.goodsList
                    .map((element) => ZtGoodsItem(goodsItem: element))
                    .toList()),
          ),
        ));
  }
}
